<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 实现三个按钮 点击每个按钮显示对应div ，且 按钮会加上背景颜色，也就是指点现在点击的是哪个按钮 -->

    <button class="btnr">红色按钮</button>
    <button class="btnb">蓝色按钮</button>
    <button class="btny">黄色按钮</button>
    <div>小红</div>
    <div>小蓝</div>
    <div>小黄</div>
    <script>

        var btns = document.querySelectorAll('button');
        var divs = document.querySelectorAll('div');
        // 使用querySelectorAll的原因是该方法里自带 forEach 方法
        // 而通过getElementByTargetName的方式获取相关元素时 是没有forEach 方法的

        // 给按钮绑定点击事件
        btns.forEach(function(item,key){
                item.onclick = function(){
                    btns.forEach(function(btn){
                        btn.style.background = "";
                    })
                    this.style.background = "skyblue";

                    // 点击的按钮和div 一一对应
                    divs.forEach(function(div){
                        div.style.display = "none";
                    })
                    divs[key].style.display = "block";

                }
              
        })





















        // var btns = document.querySelectorAll('button');
        // var divs = document.querySelectorAll('div');

        // // 点击每个按钮 实现div里的内容的同步显示
        
        // btns.forEach(function(item,key){
        //     // 点击每个按钮 按钮的背景色也要做相应的切换
        //     item.onclick  = function(){
        //         btns.forEach(function(ioo,kkk){
        //         ioo.style.background = "";
        //     })
        //    item.style.background = "yellow";

            

           

        //     // 对每个div进行样式置空
        //     divs.forEach(function(itt,kk){
        //         itt.style.display = "none";
        //     })
        //     divs[key].style.display = "block";
        // }

        // })
        




















    
    </script>
</body>
</html>